<template>
  <div>
    <slot></slot>
  </div>
</template>

<script type="text/ecmascript-6">
    import MeScroll from '@js/mescroll.min.js'
    import totop from './mescroll-totop.png'
    import empty from '@img/listEmpty01.png'
    //创建vue对象
    export default {
        props: {
            upCallback: {
                type: Function,
                default: null
            },
            emptyDataBtnClick: {
                type: Function,
                default: null
            },
            toTopClass: {
                type: String,
                default: 'mescroll-totop'
            },
            upAuto: {
                type: Boolean,
                default: true
            },
            warpId: {
                type: String,
                default: 'mescroll'
            },
            upUse: {
                type: Boolean,
                default: true
            },
            scrollId: {
                type: String,
                default: 'body'
            },
            scrollTop: {
                type: Number,
                default: 0
            },
            num: {//当前第几页
              type: [String,Number],
              default: 0
            },
            page: {
                type: [String,Number],
                default: 10
            },
            emptyData: {
                type: Object,
                default:function () {
                    return {
                        title:"暂无相关信息",//标题
                        contUp:"",//内容提示1
                        markDown:"",//标准上下限
                        btntext:""
                    }
                }
            }
        },
        data() {
            return {
                mescroll: null,
                scrollIds:{},
            }
        },
        mounted() {
            //创建Mescroll对象,down可以不用配置,因为内部已默认开启下拉刷新,重置列表数据为第一页
            //解析: 下拉回调默认调用mescroll.resetUpScroll(); 而resetUpScroll会将page.num=1,再执行up.callback,从而实现刷新列表数据为第一页;
            let self = this;
          var tip='<span><font class="tmptytitle">'+self.emptyData.title+'</font>';
          if(self.emptyData.contUp){
            tip+='<font class="tmptycontUp">'+self.emptyData.contUp+'</font>';
          }
          if(self.emptyData.markDown){
            tip+='<font class="tmptymarkDown">'+self.emptyData.markDown+'</font></span>';
          }
            this.mescroll = new MeScroll(self.scrollId, {
                down: {use: false},
                up: {
                    use:self.upUse,
                    auto: self.upAuto,
                    callback: self.upCallback, //上拉回调
                    page: {num: self.num,size: self.page}, //num 当前页 可配置每页8条数据,默认10
                    toTop: { //配置回到顶部按钮
                        src: totop, //默认滚动到1000px显示,可配置offset修改
                        offset: 1000,
                        warpClass: self.toTopClass
                    },
                    noMoreSize: 1,  //如果列表已无数据,可设置列表的总数量要大于半页才显示无更多数据;避免列表数据过少(比如只有一条数据),显示无更多数据会不好看; 默认5
                    empty: { //配置列表无任何数据的提示
                        warpId: self.warpId,
                        icon: empty,
                        tip: tip,
                        btntext: self.emptyData.btntext ? self.emptyData.btntext : "",
                        btnClick: self.emptyDataBtnClick,
                    },
                    warpId: self.warpId,
                    htmlNodata: '<p class="upwarp-nodata">已经到底了</p>',
                    scrollbar: {use: true, barClass: "mescroll-bar"},
                    htmlLoading: '<p class="upwarp-progress mescroll-rotate"></p><p class="upwarp-tip">加载中..</p>',
                }
            });
        },
        methods: {
            //上拉回调 page = {num:1, size:10}; num:当前页 ,默认从1开始; size:每页数据条数,默认10
            endSuccess(curPageDataLength){
                this.mescroll && this.mescroll.endSuccess(curPageDataLength);
            },
            // (推荐): 后台接口有返回列表的总数据量 totalSize
            endSuccess(curPageDataLength, totalSize){
                this.mescroll && this.mescroll.endSuccess(curPageDataLength, totalSize);
            },
            endErr(){
                this.mescroll && this.mescroll.endErr();
            },
            deactivated(){
                this.mescroll && this.mescroll.deactivated();
            },
 /*           activated(){
                if (!(this.mescroll && this.mescroll.beActivated)) {
                    this.mescroll.activated();
                }
            },*/
            getScrollTop(){
                if(this.mescroll){
                    return this.mescroll.getScrollTop();
                }
                return 0;
            },
            scrollTo(top,duration){
                this.mescroll && this.mescroll.scrollTo(top,duration);
            },
    /*        btnClick() {
                alert("点击了去逛逛按钮,请具体实现业务逻辑");
            },*/
            resetUpScroll(){
                this.mescroll && this.mescroll.resetUpScroll();
            },
            hideTopBtn(){
                this.mescroll && this.mescroll.hideTopBtn();
            },
            hideUpScroll(){
                this.mescroll && this.mescroll.hideUpScroll();
            },
            showEmpty(){
                this.mescroll && this.mescroll.showEmpty();
            }
        },
        computed: {
            list() {
                return this.$store.state.base_data.list
            }
        },
        destroyed(){
            this.mescroll &&this.mescroll.destroy();
        },
        deactivated(){
           // this.deactivated();
            let warpId = this.warpId;
            let scrollMap = {}
            scrollMap[warpId] = this.mescroll.preScrollY;
            //this.$store.dispatch('setScrollTop', scrollMap)
        },
        activated(){
           // this.activated();
            let scrollTop = 0;
          //  if(this.$store.state.scrollTops.hasOwnProperty(this.warpId)){
           //     scrollTop = this.$store.state.scrollTops[this.warpId];
         //   }
            this.scrollTo(scrollTop,0)
        }
    };
</script>

<style lang="scss">
  @import './mescroll.min.scss';

  .mescroll-downwarp .downwarp-progress,.mescroll-upwarp .upwarp-progress {
    border: 0px solid gray;
    background: transparent url("") no-repeat;
    background-size: 100%;
  }
  .mescroll-empty{
    padding-top:0px;
    margin-top:5%;
    .empty-btn{
      max-width: 22%;
      background-color: #2aa2aa;
      color: #FFFFFF;
      padding:px2rem(10px);
      font-size: px2rem(42px);
    }
  }
  .mescroll-empty .empty-icon{
    width:  px2rem(324px);
  }
  .mescroll-empty .empty-tip{
   margin-top: px2rem(30px);
    font-size: px2rem(74px);
  }
  .mescroll-empty .empty-tip{
     text-align: center;
  }
  .mescroll-empty .empty-tip span{
    display: inline-block;
    min-height: px2rem(120px);
    line-height: px2rem(65px);
    color: #999999;
    vertical-align: middle;
    font-size: px2rem(48px);
    margin-top:px2rem(10px);
  }
  .mescroll-empty .empty-tip span .tmptytitle{
    font-size: px2rem(73.98px);
    color: #666666;display: block;
    margin-bottom: px2rem(30px);
  }
  .mescroll-empty .empty-tip span .tmptycontUp{
    font-size: px2rem(46px);
    color: #666666;display: block;
  }
  .mescroll-empty .empty-tip span .tmptymarkDown{
    font-size: px2rem(42px);
    color: #999999;display: block;
  }
</style>
